import './index.scss';
export default {
  name: "AElPagination",
  props: {
    margin: { type: String, default: "10px" },
    padding: { type: String, default: "0" },
    pageSize: { type: Object, default: () => ({}) },
    layout: { type: String, default: "prev, pager, next,total,sizes" },
    pagerCount: { type: Number, default: 5 }
  },
  data() {
    return {
      debounce: this.$FN.debounce(this.$listeners.change, 200),
      form: {
        page: 1,
        size: 10
      }
    }
  },
  created() {
    this.initForm();
  },
  methods: {
    /**
     * 初始化数据
     */
    initForm() {
      Object.keys(this.form).forEach(key => this.form[key] = this.pageSize[key]);
    },
    /**
     * 当前页发生改变时
     */
    currentChange(page) {
      this.form.page = page;
      this.debounce(this.form);
    },
    /**
     * 页数据大小发生改变时
     */
    sizeChange(size) {
      this.form.size = size;
      this.debounce(this.form);
    },

  },
  render() {
    // 获取实例props数据
    let { margin = null, padding = null, layout = null, pagerCount = 5, pageSize: { page = 1, size = 10, total = 0 } = {} } = this;

    // 获取实例方法
    let { currentChange = () => null, sizeChange = () => null } = this;

    // 获取props剩余参数
    let { $attrs, $listeners } = this;


    return (
      <div class="a-el-pagination" style={{ margin, padding }}>
        <el-pagination layout={layout} key={page} pagerCount={pagerCount} props={$attrs} currentPage={page} pageSize={size} total={total} oncurrent-change={currentChange} onsize-change={sizeChange} on={$listeners}></el-pagination>
      </div>
    )
  }
};